<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>角色-菜单维护</title>
    <#include "../../commonFile/quote.ftl"/>
</head>
<body class="container-fluid">
<!--菜单表格-->
<div class="col-xs-9">
    <table id="baseRoleMenuTable" class="table  table-striped table-bordered table-hover"></table>
    <div id="baseRoleMenuToolbar">
        <button class="btn btn-default btn-sm" type="button" onclick="baseRoleMenu.saveRoleMenu()">保存</button>
    </div>
</div>
<div class="col-xs-3">
    <div style="width: 99%;height: 100%;" id="tree"></div>
</div>
<script>
    //全局变量baseRoleMenu（菜单维护）
    var baseRoleMenu = {};
    //初始化表格
    baseRoleMenu.tableInit = function(){
        $("#baseRoleMenuTable").bootstrapTable({
            url:'/systemRoleMenu/getRoleInfo',  //获取表格数据
            contentType:'application/x-www-form-urlencoded; charset=UTF-8',//使用post传参，去掉后无法成功
            method: "post",
            toolbar:"#baseRoleMenuToolbar",
            cache: false,            //禁用ajax缓存
            striped: true,           //表格显示条纹
            pagination: true,        //在底部显示分页组件
            pageList: [10, 20],       //设置页面可以显示的数据条数
            pageSize: 10,             // 页面数据条数
            pageNumber: 1,            // 首页页码
            sidePagination: 'server', // 设置为服务器端分页
            showColumns:true,        //是否显示内容列下拉框
            showToggle:false,         //切换详细视图和列表视图
            queryParamsType: '',
            queryParams:baseRoleMenu.queryParams,
            idField:'id',             //指定主键列
            onClickRow:function (row) {
                var obj;
                obj = {id:row.id};
                $.ajax({
                    type: 'post',
                    url: '/systemRoleMenu/getInfoByRoleId',
                    async: false,
                    traditional: true,
                    data:obj,
                    dataType: 'json',
                    success: function (result) {
                        $('#tree').treeview('uncheckAll', { silent: true });
                        for(var i = 0;i<result.data.length;i++){
                            var nodeId = result.data[i].menu_Id;
                            var node = $('#tree').treeview('getNode', nodeId);
                            $('#tree').treeview('checkNode', [ node, { silent: true } ]);
                        };
                    }
                });
            },
            columns:[
                {
                    checkbox: true,   //显示一个勾选框
                    align: 'center'   //居中显示
                },
                {
                    field:'name',  //返回json中的name
                    title:'角色名称',   //表格表头显示文字
                    align:'center',   //左右居中
                    valign: 'middle' // 上下居中
                },
                {
                    field:'orgtype',
                    title:'角色类型',
                    align:'center',
                    valign: 'middle',
                }
            ]
        });
    };
    //初始化菜单树treeview
    baseRoleMenu.treeViewInit = function () {
        $.ajax({
            type: 'post',
            url: '/systemRoleMenu/menuTreeInfo',
            async: false,
            dataType: 'json',
            success: function (result) {
                //初始化treeView
                $('#tree').treeview({
                    highlightSelected: true,//当选择节点时是否高亮显示。
                    showBorder: true,//是否在节点上显示边框。
                    showImage: true,
                    showIcon:true,
                    showCheckbox:true,
                    data: result.data
                });
            }
        });
    };
    //表格传参的方法
    baseRoleMenu.queryParams = function (params){   //请求服务器数据时，添加额外参数
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            pageSize:params.pageSize, // 每页要显示的数据条数
            pageNum:params.pageNumber   // 页码
        };
        return temp;
    };
    //保存按钮点击事件
    baseRoleMenu.saveRoleMenu = function () {
        var treeList,menuIdList = [],tableList,roleId,obj;
        tableList = $('#baseRoleMenuTable').bootstrapTable('getSelections');
        if(tableList.length>1){
            alert("您好，只能选择一个角色");
            return;
        }else if(tableList.length<1){
            alert("您好，请选择一个角色");
            return;
        }else{
            roleId = tableList[0].id;
        }
        treeList = $('#tree').treeview('getChecked');
        if(treeList.length<1){
            alert("您好，请为角色选择菜单")
        }
        for(var i=0; i<treeList.length;i++ ){
            menuIdList.push(treeList[i].id);
        };
        obj = {roleId:roleId,menuIdList:JSON.stringify(menuIdList)};
        $.ajax({
            type: 'post',
            url: '/systemRoleMenu/addRoleMenuInfo',
            async: false,
            traditional: true,
            data:obj,
            dataType: 'json',
            success: function (result) {
                if(result.success==true){
                    alert(result.message);
                }else{
                    alert(result.message);
                }
            }
        });
    };
    //选中所有父节点
    function checkAllParent(node){
        $('#tree').treeview('checkNode',node.nodeId,{silent:true});
        var parentNode = $('#tree').treeview('getParent',node.nodeId);
        if(!("nodeId" in parentNode)){
            return;
        }else{
            checkAllParent(parentNode);
        }
    }
    //取消所有子节点
    function uncheckAllSon(node){
        $('#searchTree').treeview('uncheckNode',node.nodeId,{silent:true});
        if(node.nodes!=null&&node.nodes.length>0){
            for(var i in node.nodes){
                uncheckAllSon(node.nodes[i]);
            }
        }
    }
    //取消所有父节点
    function uncheckAllParent(node){
        $('#searchTree').treeview('uncheckNode',node.nodeId,{silent:true});
        var siblings = $('#searchTree').treeview('getSiblings', node.nodeId);
        var parentNode = $('#searchTree').treeview('getParent',node.nodeId);
        if(!("nodeId" in parentNode)) {
            return;
        }
        var isAllUnchecked = true;  //是否全部没选中
        for(var i in siblings){
            if(siblings[i].state.checked){
                isAllUnchecked=false;
                break;
            }
        }
        if(isAllUnchecked){
            uncheckAllParent(parentNode);
        }

    }
    //文档就绪事件
    $(function () {
        baseRoleMenu.treeViewInit();
        baseRoleMenu.tableInit();
    });
</script>
</body>
</html>